<!DOCTYPE html>
<html>
<head>
  <title>Physics Diagram: Sliding Triangle</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
    canvas {
      border: 1px solid #999;
      background-color: #fff;
    }
  </style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="450"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // --- Configuration ---
  const origin = { x: 80, y: 380 };
  const length_a = 200; // Visual length for side BC (vertical)
  const length_b = 250; // Visual length for side AC (horizontal)
  const axisLength = 320;
  const arrowHeadSize = 10;
  
  // --- Style Settings ---
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.lineWidth = 2;
  ctx.lineCap = 'round';
  ctx.lineJoin = 'round';
  const labelFont = "italic 24px 'Times New Roman'";
  const varFont = "italic 20px 'Times New Roman'";
  const subFont = "italic 14px 'Times New Roman'";

  // --- Helper Function ---
  /**
   * Draws a line with an arrowhead at the end.
   * @param {CanvasRenderingContext2D} context The canvas rendering context.
   * @param {number} fromX The starting x-coordinate.
   * @param {number} fromY The starting y-coordinate.
   * @param {number} toX The ending x-coordinate.
   * @param {number} toY The ending y-coordinate.
   * @param {number} headSize The size of the arrowhead.
   */
  function drawArrow(context, fromX, fromY, toX, toY, headSize) {
    const angle = Math.atan2(toY - fromY, toX - fromX);
    // Draw the line
    context.beginPath();
    context.moveTo(fromX, fromY);
    context.lineTo(toX, toY);
    context.stroke();

    // Draw the arrowhead
    context.beginPath();
    context.moveTo(toX, toY);
    context.lineTo(toX - headSize * Math.cos(angle - Math.PI / 6), toY - headSize * Math.sin(angle - Math.PI / 6));
    context.lineTo(toX - headSize * Math.cos(angle + Math.PI / 6), toY - headSize * Math.sin(angle + Math.PI / 6));
    context.closePath();
    context.fill();
  }

  // 1. Draw Coordinate System
  ctx.font = labelFont;
  // x-axis
  drawArrow(ctx, origin.x, origin.y, origin.x + axisLength, origin.y, arrowHeadSize);
  ctx.fillText('x', origin.x + axisLength + 10, origin.y + 8);
  // y-axis
  drawArrow(ctx, origin.x, origin.y, origin.x, origin.y - axisLength, arrowHeadSize);
  ctx.fillText('y', origin.x - 25, origin.y - axisLength - 5);
  // Origin label
  ctx.fillText('O', origin.x - 30, origin.y + 25);

  // 2. Define Triangle Vertices (in canvas coordinates)
  const A = { x: origin.x, y: origin.y - length_a };
  const B = { x: origin.x + length_b, y: origin.y };
  const C = { x: origin.x + length_b, y: origin.y - length_a };

  // 3. Draw the Triangle
  ctx.beginPath();
  ctx.moveTo(A.x, A.y);
  ctx.lineTo(B.x, B.y);
  ctx.lineTo(C.x, C.y);
  ctx.closePath(); // Connects C back to A
  ctx.stroke();

  // 4. Draw Labels
  // Point labels
  ctx.font = labelFont;
  ctx.fillText('A', A.x + 5, A.y - 10);
  ctx.fillText('B', B.x - 25, B.y - 10);
  ctx.fillText('C', C.x + 10, C.y - 5);

  // Side length labels
  ctx.font = varFont;
  ctx.textAlign = 'center';
  ctx.fillText('b', A.x + length_b / 2, A.y - 15);
  ctx.textAlign = 'left';
  ctx.fillText('a', C.x + 15, C.y + length_a / 2 + 8);
  
  // 5. Draw Motion Vectors
  // Velocity v_A
  const vArrowLength = 60;
  drawArrow(ctx, A.x, A.y, A.x, A.y + vArrowLength, arrowHeadSize);
  ctx.textAlign = 'right';
  ctx.font = varFont;
  ctx.fillText('v', A.x - 12, A.y + 45);
  ctx.font = subFont;
  ctx.fillText('A', A.x - 5, A.y + 50);
  ctx.textAlign = 'left';

  // Motion indicator for B
  const bArrowLength = 60;
  drawArrow(ctx, B.x - 80, B.y + 30, B.x - 80 + bArrowLength, B.y + 30, arrowHeadSize);

</script>
</body>
</html>